<template>
  <div>
    <div>
      <h1 ref="titleRef">TodoList</h1>
      <input type="text" placeholder="Input some..." v-model="todoText" />
      <button @click="addTodo">Add</button>
    </div>
    <ul>
      <li v-for="todo of todoData" :key="todo.id">
        <input
          type="checkbox"
          :checked="todo.completed"
          @click="toggleTodo(todo.id)"
        />
        <span
          :style="{ textDecoration: todo.completed ? 'line-through' : '' }"
          >{{ todo.content }}</span
        >
        <button @click="removeTodo(todo.id)">Delete</button>
      </li>
    </ul>
  </div>
</template>

<script>
import { todoState, todoMethods } from './model';

export default {
  name: 'App',
  data() {
    return todoState;
  },
  methods: {
    ...todoMethods(), //将对象里所有操作数据的方法平铺进来
  },
  mounted() {
    setTimeout(() => {
      this.$refs.titleRef.innerText = '待办事项列表';
    }, 1000);
  },
};
</script>
